<template>
    <div>
        <div class="form_tab">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="上级分类">
                    <el-select v-model="ruleForm.category" class="m-2" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="数量单位">
                    <el-input v-model="ruleForm.num" />
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="ruleForm.sort" />
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-radio-group v-model="ruleForm.show">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否显示在导航栏">
                    <el-radio-group v-model="ruleForm.showNav">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分类图标">
                    <el-upload v-model:file-list="fileList" class="upload-demo"
                        action="http://xue.cnkdl.cn:9082/mall-admin/minio/upload" :on-preview="handlePreview"
                        :on-remove="handleRemove" list-type="picture" :on-success="uploadingFn">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件，且不超过100kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="筛选属性">
                    <div class="input_list">
                        <el-cascader v-model="ruleForm.property" :options="options2" :props="props" />
                        <el-button>删除</el-button>
                    </div>
                    <div class="button_box">
                        <el-button type="primary">新增</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="关键字">
                    <el-input v-model="ruleForm.keyword" />
                </el-form-item>
                <el-form-item label="分类描述">
                    <el-input v-model="ruleForm.describe" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    <el-button @click="resetFn">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import * as request from '@/request/modules/productCategory';
import { onMounted, reactive, ref, type Ref } from 'vue';
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadProps, type UploadUserFile } from 'element-plus';
import { useRouter } from 'vue-router';
//接口
interface oo {
    value: string | number,
    label: string,
}
interface optionsInf {
    value: string | number,
    label: string,
    children: oo[]
}
interface CategoryList {
    id: number;
    parentId: number;
    name: string;
    level: number;
    productCount: number;
    productUnit: string;
    navStatus: number;
    showStatus: number;
    sort: number;
    icon?: string;
    keywords: string;
    description?: any;
}
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive({
    name: '',
    category: 0,
    num: "",
    sort: 0,
    show: 0,
    showNav: 0,
    property: 0,
    keyword: '',
    describe: "",
    level: 0,
    id: 0,
    icon: ''
})
const route = useRoute();
const router = useRouter();
const id = route.query.id as unknown as number;
const options = ref([{
    value: 0,
    label: '无上级分类',
}]) as Ref<optionsInf[]>;
const options2 = ref([]) as Ref<optionsInf[]>;
const props = {
    expandTrigger: 'hover' as const,
}
//校验规则
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '该字段不能为空', trigger: ['change', 'blur'] },
    ],
})
async function getGoodsCategoryData() {
    console.log(id);
    if (!id) {
        return
    }
    let GoodsCategoryData = await request.getGoodsCategory(id);
    console.log(GoodsCategoryData);
    ruleForm.name = GoodsCategoryData.name;
    ruleForm.level = GoodsCategoryData.level as number
    ruleForm.num = GoodsCategoryData.productUnit
    ruleForm.sort = GoodsCategoryData.sort
    ruleForm.show = GoodsCategoryData.showStatus
    ruleForm.showNav = GoodsCategoryData.navStatus
    ruleForm.keyword = GoodsCategoryData.keywords
    ruleForm.describe = GoodsCategoryData.description as string,
        ruleForm.id = GoodsCategoryData.id
}
onMounted(() => {
    getGoodsCategoryData();
})
let info = getProperty();
console.log(info);

async function getProperty() {
    let superior = await request.productCategoryAPI({
        parentId: 0,
        pageSize: 100,
        pageNum: 1
    })
    superior.list.forEach((item) => {
        options.value.push({
            value: item.name,
            label: item.name,
            children: []
        })
    })
    let property = await request.withAttrAPI();
    console.log(property);

    property.forEach((item, index) => {
        options2.value.push({
            value: item.id,
            label: item.name,
            children: []
        })
        if (item.productAttributeList.length) {
            item.productAttributeList.forEach(items => {
                options2.value[index].children.push({
                    value: items.id,
                    label: items.name
                })
            })
        }
    })
    return superior.list;
}
//重置
const resetFn = () => {
    ruleForm.name = ''
    ruleForm.category = 0;
    ruleForm.num = ''
    ruleForm.sort = 0
    ruleForm.show = 0
    ruleForm.showNav = 0
    ruleForm.property = 0
    ruleForm.keyword = ''
    ruleForm.describe = ''
}
//提交
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            ElMessageBox.confirm(
                '你确定要修改该品牌吗?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(async () => {
                    await request.changeCommodity({
                        description: ruleForm.describe,
                        icon: ruleForm.icon,
                        keywords: ruleForm.keyword,
                        name: ruleForm.name,
                        navStatus: ruleForm.showNav,
                        parentId: 0,
                        productAttributeIdList: ruleForm.property === 0 ? [0] : ruleForm.property,
                        productUnit: ruleForm.num,
                        showStatus: ruleForm.show,
                        sort: ruleForm.sort,
                        id: id as number,
                    })
                    ElMessage({
                        type: 'success',
                        message: '修改成功',
                    })
                    router.push("/pms/productCate")
                })

        } else {
            console.log('error submit!', fields)
        }
    })
}
//上传图片
const fileList = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}
//上传
const uploadingFn = (res: any) => {
    ruleForm.icon = res.data.url;
}
</script>

<style lang="less" scoped>
.el-form {
    padding: 43.5px;
}

.form_tab {
    margin: 35px auto;
    border: 1px solid #ccc;
    width: 790px;
}

::v-deep(.el-form-item__label) {
    width: 140px !important;

}
</style>